<template>
	<div class="city">
		<div class="search_wrap">
			<div class="search">
				<i class="fa fa-search"></i>
				<input v-model="city_val" type="text" placeholder="输入城市名">
			</div>
			<button @click="$router.push({name:'address',params:{city:currentSelectCity}})">取消</button>
		</div>
		<div v-if="searchList.length==0">
			
				<location :address="city" @click.native="selectCity(city)"></location>
			<scroll class="content" ref="scroll" :probe-type="3">
				
				<a-bet @CitySelect="selectcurrentCity" ref="allcity" :CityInfo="cityInfo" :keys="keys"></a-bet>
			</scroll>
		</div>
		
		<div class="search_list" v-if="searchList.length!=0">
			<ul>
				<li @click="selectCity(item)" v-for="item,index in searchList" :key="index">{{item}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import ABet from '../components/Alphabet.vue'
	import Location from '../components/location.vue'
	import scroll from '../components/Scroll/Scroll.vue'
	export default{
		components:{
			Location,
			ABet,
			scroll
		},
		computed:{
		city(){
			//获取城市 如果获取不到就获取省份
			return this.$store.getters.location.addressComponent.city||
			this.$store.getters.location.addressComponent.province
		}
		},
		activated() {
			this.searchList=[]
			this.city_val=""
			this.$refs.scroll.scroll.refresh();
		},
		data(){
			return{
				city_val:"",//输入的城市名
				cityInfo:[],//json文件返回的城市
				keys:[],//城市的编号
				allCities:[],//全部城市
				searchList:[],//当前检索的城市
				currentSelectCity:""
			}
		},
		created() {
			this.getCityInfo()
		},
		destroyed() {
			console.log('11')
		},
		watch:{
			city_val(){
				console.log(this.city_val)
				this.searchCity();
			}
		},
		methods:{
			selectcurrentCity(city){
				this.currentSelectCity=city.name
			},
			searchCity(){
				if(!this.city_val){
					 this.searchList=[]
				}
				else {
					console.log(this.allCities)
					this.searchList=this.allCities.filter(item=>{
					//indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置 如果找不到九返回-1
						return item.indexOf(this.city_val)!=-1
					})
				console.log(this.$refs.allcity)
				}
			},
			getCityInfo(){
				// this.$axios("/api/posts/cities").then(res=>{
					this.$axios.get("/city.json").then(res=>{
					console.log(res);
					
					
					this.cityInfo=res.data.city;
//this.$refs访问子组件的数据
		//存储所有城市用来搜索过滤
		     this.keys=Object.keys(res.data.city)
			
				this.keys.forEach(key=>{
				
					this.allCities.push(this.cityInfo[key].name)
				})
				}).catch(err=>console.log(err))
			},
			selectCity(item){
				this.currentSelectCity=item;
					this.$router.push({name:'address',params:{city:item}})
			}
		}
	}
</script>

<style scoped>
.city {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 45px;
}
.search_wrap {
  position: fixed;
  top: 0;
  height: 45px;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 3px 16px;
  display: flex;
  justify-content: space-between;
}
.search {
  background-color: #eee;
  border-radius: 10px;
  line-height: 40px;
  width: 85%;
  box-sizing: border-box;
  padding: 0 16px;
}
.search input {
  background: #eee;
  outline: none;
  border: none;
  margin-left: 5px;
}
.search_wrap button {
  outline: none;
  color: #009eef;
}

.location {
	width: 100%;
  background: #fff;
  padding: 8px 16px;
  height: 65px;
  box-sizing: border-box;
}

.search_list {
  background: #fff;
  padding: 5px 16px;
}
.search_list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
button{
	background-color: transparent;
	border: 2px solid #EEEEEE;
	border-radius: 5px;
	width: 45px;
}
.content{
	height: calc(100vh - 155px);
	overflow: hidden;
}
</style>

